<template>
    <div class="views-shangpinxinxi-web-detail">
        <div>
            <e-container>
                <div class="title-modelbox-widget">
                    <h3 class="section-title">商品详情</h3>
                    <div class="sidebar-widget-body">
                        <div class="">
                            <div class="goods-info clearfix">
                                <div class="gallery-list">
                                    <e-shangpinban :images="map.shangpintupian"></e-shangpinban>
                                </div>
                                <div class="goods-right-content">
                                    <h3 class="title" v-text="map.shangpinmingcheng"></h3>
                                    <div class="descount">
                                        <div>
                                            <span class="name"> 商品分类： </span>
                                            <span class="val">
                                                <e-select-view module="shangpinfenlei" :value="map.shangpinfenlei" select="id" show="fenleiming"></e-select-view>
                                            </span>
                                        </div>
                                        <div>
                                            <span class="name"> 商品附件： </span>
                                            <span class="val"> <e-file-list v-model="map.shangpinfujian"></e-file-list> </span>
                                        </div>
                                        <div>
                                            <span class="name"> 价格： </span>
                                            <span class="val"> {{ map.jiage }} </span>
                                        </div>
                                        <div>
                                            <span class="name"> 销量： </span>
                                            <span class="val"> {{ map.xiaoliang }} </span>
                                        </div>
                                        <div>
                                            <span class="name"> 发布人： </span>
                                            <span class="val"> {{ map.faburen }} </span>
                                        </div>
                                    </div>


                                    <GouwucheAdd :id="route.query.id" btn-text="加入购物车"></GouwucheAdd>




                                    <e-chat-check  v-if="map.faburen != $session.yonghuming && $session.cx == '用户' " type="success" :rid="map.faburen">私聊</e-chat-check>


                                    <e-collect
                                        module="shoucang"
                                        :form="{biaoid:'xwid',biao:'biao',biaoti:'biaoti'}"
                                        :biaoid="$route.query.id"
                                        biao="shangpinxinxi"
                                        :biaoti="map.shangpinmingcheng"
                                    >
                                        <template #icon="{isCollect}">
                                            <i :class="isCollect?'el-icon-star-filled' : 'el-icon-star'"></i>
                                        </template>
                                        <template #default="{isCollect}"> {{ isCollect ? '取消收藏' : '收藏' }} </template>
                                    </e-collect>
                                </div>
                            </div>
                            <div class="goods-content" v-html="map.shangpinmiaoshu"></div>
                        </div>
                    </div>
                    <!-- /.sidebar-widget-body -->
                </div>
            </e-container>
        </div>
    </div>
</template>

<script setup>
    import http from "@/utils/ajax/http";
    import DB from "@/utils/db";
    import EShangpinban from "@/components/shangpin/shangpinban.vue";

    import { ref, reactive, watch, computed } from "vue";
    import { useRoute } from "vue-router";
    import { session } from "@/utils/utils";
    import { extend } from "@/utils/extend";
    import { useShangpinxinxiFindById, canShangpinxinxiFindById } from "@/module";

    import GouwucheAdd from '@/views/gouwuche/lijigoumai.vue'


    const route = useRoute();

    // 获取详情页面的一行数据,当url参数id变更时，自动
    const map = useShangpinxinxiFindById(route.query.id);
    // 当url参数id变更时，自动更新map中的数据
    watch(
        () => route.query.id,
        (id) => {
            canShangpinxinxiFindById(id).then((res) => {
                extend(map, res);
            });
        }
    );
    components: { GouwucheAdd }

    // end 获取详情页面的一行数据
</script>

<style scoped lang="scss">
    .views-shangpinxinxi-web-detail {
    }
</style>
